<script setup>
  const props = defineProps({
    swipeData: {
      type: Array,
      default: () => []
    }
  })

  //对数据进行转换
  const swipeGroup = {}
  props.swipeData.forEach(item => {
    let valueArray = swipeGroup[item.enumPictureCategory]
    if (!valueArray) {
      valueArray = []
      swipeGroup[item.enumPictureCategory] = valueArray
    }
    valueArray.push(item);
  })

  //定义转换数据的方法
  const getName = name => {
    return name.replace(/[【】：1]/g, '')
  }

  const getCategoryIndex = item => {
    const valueArray = swipeGroup[item.enumPictureCategory]
    return valueArray.findIndex(data => data === item) + 1
  }

</script>

<template>
  <div class="detailSwipe">
    <van-swipe class="swipeList" :autoplay="3000" indicator-color="white">
      <template v-for="(item,index) in swipeData" :key="index">
        <van-swipe-item class="item">
          <img :src="item.url" alt="图片">
        </van-swipe-item>
      </template>

      <template #indicator="{active,total}">
        <!--指示器-->
        <div class="instructions">
          <template v-for="(value,key) in swipeGroup" :key="key">
            <div class="title"
                 :class="{active:swipeData[active]?.enumPictureCategory == key}">
              <span class="text">{{ getName(value[0].title) }}</span>
              <span class="num" v-if="swipeData[active]?.enumPictureCategory == key">
                {{ getCategoryIndex(swipeData[active]) }} / {{ value.length }}
              </span>
            </div>
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<style lang="less" scoped>
  .detailSwipe {
    .swipeList {
      .item {
        img {
          width: 100%;
        }
      }

      .instructions {
        position: absolute;
        right: 5px;
        bottom: 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
        color: white;
        display: flex;
        border-radius: var(--options-border-radius);

        .title {
          padding: 2px 10px;

          &:not(:first-of-type,:last-of-type) {
            margin: 0 6px;
          }

          &.active {
            background: white;
            color: black;
            border-radius: var(--options-border-radius);
          }

          .num {
            margin-left: 5px;
          }
        }
      }
    }
  }
</style>